import styled from './index.module.scss'
import {useEffect, useMemo, useState} from 'react'
import {orderConfirm, orderLogistics, orderObligation, orderSales, orderStatus, userQuery} from '@/api'
import {PersonalDataForm} from '@/type/personalData'
import config from '@/static/config'
import {useNavigate} from 'react-router-dom'
import {orderLogisticsCode, orderLogisticsType, orderStatusType} from '@/type/personalDeal'
import Base64 from '@/utils/base64'
import {Button, message, Space, Table} from 'antd'
import dayjs from 'dayjs'
const PersonalDeal = () => {
	const [query, setQuery] = useState<PersonalDataForm>()
	const navigate = useNavigate()
	const [status, setStatus] = useState<orderStatusType[]>()
	const [list, setList] = useState<orderLogisticsType[]>([])

	useEffect(() => {
		getList()
	}, [])

	const table = useMemo(() => {
		const onConfirm = (row: orderLogisticsType) => {
			orderConfirm(row).then(res => {
				if (res.code === 200) {
					message.success(res.message)
					getList()
				}
			})
		}

		const onSales = (record: orderLogisticsType) => {
			orderSales( record ).then( res  => {
				if (res.code === 200) {
					message.success(res.message)
					getList()
				}
			})
		}

		return (
			<Table
				rowKey={"id"}
				columns={[
					{
						title: '商品信息',
						align: 'center',
						dataIndex: "product_name",
						render: (text, record:orderLogisticsType) => {
							return (
								<div style={{
									display: "flex",
									alignItems: "center",
									justifyContent: 'center'
								}}>
									<img src={config.productImgUrl + record.product_pic} width={40} height={40} alt=""/>
									<span>{record.product_name}</span>
								</div>
							)
						}
					},
					{
						title: '收货地址',
						align: 'center',
						dataIndex: 'address'
					},
					{
						title: '收货人名称',
						align: 'center',
						dataIndex: 'address_name'
					},
					{
						title: '物流状态',
						align: 'center',
						dataIndex: 'logistics_status',
						render: (text) => {
							return orderLogisticsCode.filter(item => item.label === text)[0].value
						}
					},
					{
						title: '物流更新时间',
						align: 'center',
						dataIndex: 'logistics_update_time',
						render: (text) => {
							return dayjs(text).format("YYYY-MM-DD HH:mm:ss")
						}
					},
					{
						title: '操作',
						align: 'center',
						render: (text, record) => {
							return (
								<Space>
									<Button type={'primary'} size={"small"} onClick={() => onConfirm(record)}>确认收货</Button>
									<Button type={"primary"} size={"small"} onClick={() => onSales(record)}>申请退货</Button>
								</Space>
							)
						}
					},
				]}
				size={'small'}
				pagination={false}
				dataSource={list}
			></Table>
		)
	},[list])

	function getList () {
		//  获取个人信息
		userQuery().then(res => {
			setQuery(() => res.data)
		})
		// 获取订单状态
		orderStatus().then(res => {
			setStatus(res.data)
		})
		// 获取物流信息
		orderLogistics().then(res => {
			setList(res.data)
		})
	}


	const onStatus = (i:number, item: orderStatusType) => {
		if (i === 0 && item[1] !== 0) {
			orderObligation().then(res => {
				if (res.code === 200) {
					const base = new Base64()
					const strs = `obligation=${res.data}`
					navigate(`/home/order/${base.encode(strs)}`, {
						replace: true
					})
				}
			})
		}
		if (item[0] === "已收货" && item[1] > 0) {
			console.log(123456)
			navigate("/personal/received", {
				replace: true
			})
		}
	}




	return (
		<div>
			<div className={styled.personalDeal}>
				<div className={styled.personalDeal_header}>
					<span>我的物流信息</span>
				</div>
				<div className={styled.personalDeal_body}>
					<div className={styled.personalDeal_body_user}>
						<img onClick={() => navigate('/personal/personalData',{
							replace: true
						})} width={80} height={80} src={config.userImgUrl + query?.pic} alt=""/>
						<span onClick={() => navigate('/personal/personalData',{
							replace: true
						})}>{query?.username}</span>
					</div>
					<div className={styled.personalDeal_body_logistics}>
						{
							status?.map((item, i) => (
								<div key={i}>
									<div>
										<span onClick={() => onStatus(i, item)}>{item[0]}</span>
										<span onClick={() => onStatus(i, item)}>{item[1]}</span>
									</div>
								</div>
							))
						}
					</div>
				</div>
			</div>
			<div className={styled.logistics}>
				<div className={styled.logistics_header}>
					我的物流
				</div>
				<div>
					{table}
				</div>
			</div>
		</div>
	)
}

export default PersonalDeal
